<template>
  <t-dialog :visible="localVisible" header="附件" :on-close="handleClose" :footer="false">
    <template #body>
      <!--      <t-upload :accept="uploadAction" @success="handleUploadSuccess" @fail="handleUploadFail">-->
      <t-upload
        ref="uploadRef"
        v-model="files"
        :action="uploadAction"
        :headers="headers"
        multiple="10"
        @select-change="handleSelectChange"
        @fail="handleUploadFail"
        @success="handleUploadSuccess"
      />
      <!-- 上传列表 -->
      <!--      <div class="upload-list">-->
      <!--        <div v-for="file in files" :key="file.name" class="file-item">-->
      <!--          <t-icon name="file" />-->
      <!--          <div class="file-info">-->
      <!--            <span class="file-name">{{ file.name }}</span>-->
      <!--            <t-progress v-if="file.status === 'uploading'" :percentage="file.percentage" :label="false" size="small" />-->
      <!--            <t-icon v-if="file.status === 'success'" name="check-circle-filled" class="success-icon" />-->
      <!--            <t-icon v-if="file.status === 'fail'" name="error-circle-filled" class="error-icon" />-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
    </template>
  </t-dialog>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import proxy from '@/config/proxy';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps({
  visible: Boolean,
  user: {
    type: String,
    required: true,
  },
});

const localVisible = ref(props.visible);

const emit = defineEmits(['update:visible', 'confirm']);

const files = ref([]);
const headers = ref({
  Authorization: `Bearer ${import.meta.env.VITE_DIFY_API_KEY}`,
});

// 计算上传地址
const uploadAction = computed(() => `${proxy.development.host}/files/upload`);

const handleUploadSuccess = ({ fileList, response }) => {
  console.log('file:', fileList, 'response:', response);
  // const idx = files.value.findIndex((f) => f.name === file.name);
  // if (idx !== -1) {
  //   files.value[idx].status = 'success';
  //   files.value[idx].response = response.data;
  // }
  emit('confirm', fileList, response); // 传递成功上传的结果给父组件
  emit('update:visible', false); // 关闭对话框
  files.value = []; // 清空文件列表
};

const handleUploadFail = (file, error) => {
  // const idx = files.value.findIndex((f) => f.name === file.name);
  // if (idx !== -1) {
  //   files.value[idx].status = 'fail';
  //   files.value[idx].error = error;
  // }
  MessagePlugin.error(`上传失败: ${error.message}`); // 显示错误信息
};

const handleSelectChange = (files) => {
  console.log('onSelectChange', files);
};

const handleClose = () => {
  emit('update:visible', false); // 关闭对话框
  files.value = []; // 清空文件列表
};

// 监听 props.visible 变化，更新本地 visible 状态
watch(
  () => props.visible,
  (newVal) => {
    localVisible.value = newVal;
  },
);

// 监听 props.data 变化，更新本地数据
// watch(() => props.data, (newData) => {
//   localData.value = { ...newData };
// });

// 监听本地 visible 的变化，同步通知父组件
watch(localVisible, (val) => {
  emit('update:visible', val);
});
</script>

<style scoped>
.upload-list {
  margin-top: 16px;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  background: var(--td-bg-color-secondarycontainer);
  margin-bottom: 8px;
}

.file-info {
  margin-left: 8px;
  flex-grow: 1;
}

.success-icon {
  color: var(--td-success-color);
}

.error-icon {
  color: var(--td-error-color);
}
</style>
